<script setup>
	import {
		ElButton,
		ElInput,
		ElTable,
		ElTableColumn
	} from "element-plus"
	import {
		onMounted,
		ref,
		reactive,
		shallowRef
	} from "vue"
	import {
		opreationList,
		opreationSearch,
		opreationMore,
		
	} from "../api"
	import Header from "@/components/Header.vue"
	let pageIndex = ref(1);
	let pageSize = 6;
	let total = ref(0)
	let input = ref("");
	//表格中的数据
	let tableData = ref([

	])
	const getTableData = async () => {
		let res = await opreationList({
			pageIndex: pageIndex.value,
			pageSize: pageSize
		})
		// console.log("11111111", res)
		tableData.value = res.syslogList
		total.value = res.pageCount
	}

	onMounted(() => {
		getTableData()
	})
	//点击分页器

	const changePage = (page) => {
		pageIndex.value = page;
		getTableData()
	}
	//搜索
	let serachObj=reactive({
		syslogIp:"",
		adminName:"",
		syslogOperate:"",
		pageIndex:pageIndex.value,
		pageSize:pageSize
	})
	const searchOpreation = async() =>{
		// console.log("searchOpreation执行了......",serachObj)
		let res = await opreationSearch(serachObj)
		// console.log("搜索结果",res)
		tableData.value = res.syslogList
		total.value = res.pageCount
	}
	
	//重置
	const reset = async () => {
		serachObj.syslogIp = "";
		serachObj.adminName = "";
		serachObj.syslogOperate = "";
		searchOpreation()
	}
	
	//详情
	let moreInformationArray=ref([])
	const moreInformation = async(item) =>{
		// console.log("moreInformation",item.syslogId)
		let data = {
			syslogId:item.syslogId
		}
		let res =await opreationMore(data)
		// console.log("moreInformation",res[0])
		moreInformationArray.value.push(res[0])
		Visible.value= true
	}
	let Visible = shallowRef(false)
	// console.log("moreInformationArray",moreInformationArray)
</script>
<template>

	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<div class="box">
					<div class="title" style="margin-bottom: 30px;">
						<h3>操作日志</h3>
					</div>
					<div class="header" style=" display: flex;">
						<div style=" display: flex;">
							<span style="color:#333">登录IP</span>
							<el-input v-model="serachObj.syslogIp" style="width: 180px;margin-left: 10px; height: 30px;"
								placeholder="请输入登录IP" />
							<span style="color:#333;margin-left: 20px">管理员姓名</span>
							<el-input v-model="serachObj.adminName" style="width: 180px ;margin-left: 10px; height: 30px;"
								placeholder="请输入管理员姓名" />
							<span style="color:#333;margin-left: 20px">链接</span>
							<el-input v-model="serachObj.syslogOperate" style="width: 180px;margin-left: 10px; height: 30px;"
								placeholder="请输入链接" />
						</div>
						<div style="margin-left: 20px;">
							<el-button type="primary" @click="searchOpreation">搜索</el-button>
							<el-button @click="reset">重置</el-button>
						</div>
					</div>
					<div class="table">
						<el-table :data="tableData" style="width: 100%" height="47vh">
							<el-table-column prop="adminName" label="管理员姓名" />
							<el-table-column prop="syslogIp" label="登录IP" />
							<el-table-column prop="syslogOperate" label="链接" />
							<el-table-column prop="syslogHttp" label="请求方式" />
							<el-table-column prop="createTime" label="操作时间" />
							<el-table-column label="操作">
								<template #default="scope">
									<el-button link size="small" @click="moreInformation(scope.row)">
										详情
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				
				<el-pagination layout="prev,pager,next" :page-count="total" :page-size="pageSize"
					v-model:current-page="pageIndex" @current-change="changePage"></el-pagination>
					<!-- 详情对话框 -->
					<el-dialog v-model="Visible" title="详情" width="500">
						<div class="dialogBox">
							<div>
								管理员姓名：{{moreInformationArray[0].adminName}}
							</div>
							<div>
								登录IP：{{moreInformationArray[0].syslogIp}}
							</div>
							<div>
								链接：{{moreInformationArray[0].syslogOperate}}
							</div>
							<div>
								请求方式：{{moreInformationArray[0].syslogHttp}}
							</div>
							<div>
								操作时间：{{moreInformationArray[0].createTime}}
							</div>
						</div>
						<template #footer>
							
							<div class="dialog-footer">
								<!-- <el-button @click="Visible = false">取消</el-button> -->
								<el-button  @click="Visible = false">
									取消
								</el-button>
							</div>
						</template>
					</el-dialog>
					
			</el-main>
		</el-container>

	</div>

</template>

<style lang="less" scoped>
	.box {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;

		
	}

	.common-layout {
		background: #f2f3f5;

		.el-header {
			padding: 0 !important;
			height: 10vh;
		}

		.el-main {
			height: 86vh;
			padding: 0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.dialogBox{
				div{
					margin-top: 20px;
					margin-left: 50px;
				}
			}
		}
	}
</style>